<template>
  <div class="reports">
    <div class="report-filters">
      <div class="filter-group">
        <label>报表类型:</label>
        <select v-model="selectedReportType">
          <option value="sales">销售报表</option>
          <option value="inventory">库存报表</option>
          <option value="financial">财务报表</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label>时间范围:</label>
        <select v-model="timeRange">
          <option value="today">今日</option>
          <option value="week">本周</option>
          <option value="month">本月</option>
          <option value="quarter">本季度</option>
          <option value="year">本年度</option>
          <option value="custom">自定义</option>
        </select>
      </div>
      
      <div class="filter-group" v-if="timeRange === 'custom'">
        <label>开始日期:</label>
        <input type="date" v-model="startDate">
        <label>结束日期:</label>
        <input type="date" v-model="endDate">
      </div>
      
      <button class="primary-btn" @click="generateReport">生成报表</button>
      <button class="secondary-btn" @click="exportReport">导出报表</button>
    </div>

    <!-- 销售报表 -->
    <div v-if="selectedReportType === 'sales'" class="report-content">
      <h4 class="section-title">销售统计汇总</h4>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">¥{{ salesSummary.totalRevenue.toLocaleString() }}</div>
          <div class="stat-label">总销售额</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ salesSummary.totalQuantity }}</div>
          <div class="stat-label">销售数量</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ salesSummary.totalOrders }}</div>
          <div class="stat-label">订单数量</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ salesSummary.avgOrderValue.toFixed(2) }}</div>
          <div class="stat-label">平均客单价</div>
        </div>
      </div>

      <h4 class="section-title">热销药品排行</h4>
      <table class="data-table">
        <thead>
          <tr>
            <th>排名</th>
            <th>药品名称</th>
            <th>销售数量</th>
            <th>销售金额</th>
            <th>占比</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in topSelling" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>{{ item.drugName }}</td>
            <td>{{ item.quantity }}</td>
            <td>¥{{ item.revenue.toFixed(2) }}</td>
            <td>{{ item.percentage }}%</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 库存报表 -->
    <div v-if="selectedReportType === 'inventory'" class="report-content">
      <h4 class="section-title">库存统计汇总</h4>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ inventorySummary.totalSKU }}</div>
          <div class="stat-label">商品品种数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ inventorySummary.totalValue.toLocaleString() }}</div>
          <div class="stat-label">库存总价值</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ inventorySummary.lowStockCount }}</div>
          <div class="stat-label">库存不足</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ inventorySummary.expiringCount }}</div>
          <div class="stat-label">即将过期</div>
        </div>
      </div>

      <h4 class="section-title">库存周转分析</h4>
      <table class="data-table">
        <thead>
          <tr>
            <th>药品名称</th>
            <th>当前库存</th>
            <th>月销量</th>
            <th>周转率</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in inventoryTurnover" :key="item.id">
            <td>{{ item.drugName }}</td>
            <td>{{ item.currentStock }}</td>
            <td>{{ item.monthlySales }}</td>
            <td>{{ item.turnoverRate }}</td>
            <td>
              <span class="status-badge" :class="item.status">
                {{ item.statusText }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 财务报表 -->
    <div v-if="selectedReportType === 'financial'" class="report-content">
      <h4 class="section-title">财务统计汇总</h4>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">¥{{ financialSummary.totalIncome.toLocaleString() }}</div>
          <div class="stat-label">总收入</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ financialSummary.totalCost.toLocaleString() }}</div>
          <div class="stat-label">总成本</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">¥{{ financialSummary.grossProfit.toLocaleString() }}</div>
          <div class="stat-label">毛利润</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ financialSummary.profitMargin }}%</div>
          <div class="stat-label">毛利率</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const selectedReportType = ref('sales')
const timeRange = ref('month')
const startDate = ref('')
const endDate = ref('')

// 销售数据
const salesSummary = ref({
  totalRevenue: 156800,
  totalQuantity: 2340,
  totalOrders: 456,
  avgOrderValue: 343.86
})

const topSelling = ref([
  { id: '1', drugName: '阿莫西林胶囊', quantity: 234, revenue: 4329.0, percentage: 12.5 },
  { id: '2', drugName: '布洛芬片', quantity: 189, revenue: 2948.4, percentage: 8.5 },
  { id: '3', drugName: '复方甘草片', quantity: 156, revenue: 1326.0, percentage: 3.8 }
])

// 库存数据
const inventorySummary = ref({
  totalSKU: 1247,
  totalValue: 890000,
  lowStockCount: 28,
  expiringCount: 15
})

const inventoryTurnover = ref([
  { id: '1', drugName: '阿莫西林胶囊', currentStock: 15, monthlySales: 150, turnoverRate: 10.0, status: 'high', statusText: '高周转' },
  { id: '2', drugName: '维生素C片', currentStock: 200, monthlySales: 20, turnoverRate: 0.1, status: 'low', statusText: '低周转' }
])

// 财务数据
const financialSummary = ref({
  totalIncome: 156800,
  totalCost: 98300,
  grossProfit: 58500,
  profitMargin: 37.3
})

const generateReport = () => {
  alert(`生成${selectedReportType.value}报表 - ${timeRange.value}`)
}

const exportReport = () => {
  alert('导出报表')
}
</script>

<style scoped>
.reports {
  font-size: 12px;
}

.report-filters {
  background: white;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-group label {
  font-weight: bold;
  color: #333;
}

.filter-group select,
.filter-group input {
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.primary-btn, .secondary-btn {
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  border: none;
}

.primary-btn {
  background: #3498db;
  color: white;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn {
  background: white;
  border: 1px solid #bdc3c7;
  color: #333;
}

.secondary-btn:hover {
  background: #e8f4f8;
  border-color: #3498db;
}

.section-title {
  margin: 15px 0 8px 0;
  font-size: 13px;
  color: #333;
  font-weight: bold;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.stat-item {
  background: white;
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 12px;
  background: white;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

.status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  color: white;
}

.status-badge.high {
  background: #27ae60;
}

.status-badge.low {
  background: #e74c3c;
}
</style> 